<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>12306 模仿界面 订单</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/order.css">
</head>
<body>
<header class="header">
   <h2>订单</h2>
</header>
<div class="wrapper">
    <!--火车票订单-->
    <div class="orderfont">
        <h3>火车票订单</h3>
        <p>温馨提示</p>
    </div>
    <!--火车票订单图片-->
    <div class="orderimg">
        <div class="orderimgandfont">
            <img src="image/火车票订单图片%20(1).jpg">
            <p>待支付</p>
        </div>
        <div class="orderimgandfont">
            <img src="image/火车票订单图片%20(3).jpg">
            <p>已支付</p>
        </div>
        <div class="orderimgandfont">
            <img src="image/火车票订单图片%20(4).jpg">
            <p>候补订单</p>
        </div>
        <div class="orderimgandfont" onclick="location.href='myticket.html'">
            <img src="image/火车票订单图片%20(2).jpg">
            <p>本人车票</p>
        </div>
    </div>
    <!--火车票订单菜单-->
    <div class="orderlist">
            <div class="orderlistimgandfont">
                <img src="image/orderlist%20(3).jpg">
                <p>餐饮&#8226;特产订单</p>
            </div>
            <div class="orderlistimgandfont">
                <img src="image/orderlist%20(2).jpg">
                <p>保险订单</p>
            </div>
            <div class="orderlistimgandfont">
                <img src="image/orderlist%20(1).jpg">
                <p>酒店订单</p>
            </div>
            <div class="orderlistimgandfont">
                <img src="image/orderlist%20(4).jpg">
                <p>空铁联运订单</p>
            </div>
            <div class="orderlistimgandfont">
                <img src="image/orderlist%20(6).jpg">
                <p>计次&#8226;定期票订单</p>
            </div>
            <div class="orderlistimgandfont">
                <img src="image/orderlist%20(5).jpg">
                <p>约车订单</p>
            </div>
    </div>
    <div class="chakangd">
        <p>查看更多</p>
        <i class="i zondicons:cheveron-down"></i>

    </div>
    <div class="chakangdgg"><img src="image/查看更多的广告.jpg"></div>
</div>
<!--底部菜单部分-->
<ul class="footer">
    <li onclick="location.href='home_page.html'">
        <i class="i ion:md-train"></i>
        <p>首页</p>
    </li>
    <li onclick="location.href='mobility_service.html'">
        <i class="i material-symbols:checked-bag-outline"></i>
        <p>出行服务</p>
    </li>
    <li onclick="location.href='order.html'">
        <i class="i solar:document-outline" style="color: #3c97f9"></i>
        <p style="color: #3c97f9">订单</p>
    </li>
    <li onclick="location.href='vip.html'">
        <i class="i mingcute:vip-1-line"></i>
        <p>铁路会员</p>
    </li>
    <li onclick="location.href='myself.html'">
        <i class="i ic:outline-person-outline"></i>
        <p>我的</p>
    </li>
</ul>
</body>
</html>